<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-30 11:09:53
 * @LastEditTime: 2019-10-03 20:01:20
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div>
    <header class="header" v-bind:style="{ height: headerHeight+'px'}">
      <div class="title" v-bind:style="{ height: headerHeight+'px'}">
        <p class="title-text" v-bind:style="{ marginTop: headerHeight/2+'px'}">{{name}}</p>
      </div>
      <img src="/static/images/bg_1.jpg" alt="" class="bg-imgae" v-bind:style="{ height: headerHeight+'px',width:100+'%'}">
    </header>
    <div v-bind:style="{ height: headerHeight+'px'}">32321312</div>
  </div>
</template>

<script>
  // Use Vuex
  import store from "./store";
  export default {
    data() {
      return {
        headerHeight: 0,
        Custom: {}
      };
    },
    props:{
      name:{
        type:String,
        default:'test'
      }
    },
    computed: {
      count() {
        return store.state.count;
      }
    },
    methods: {
      increment() {
        store.commit("increment");
      },
      decrement() {
        store.commit("decrement");
      }
    },
    mounted() {
      wx.getSystemInfo({
        success: e => {
          let capsule = wx.getMenuButtonBoundingClientRect();
          console.log(capsule);
          console.log(e.statusBarHeight);
          this.Custom = capsule;
          if (capsule.bottom != 0 && capsule.top != 0) {
            console.log(1);
            this.headerHeight = (capsule.bottom + capsule.top - e.statusBarHeight);
          } else {
            console.log(2);
            this.headerHeight = e.statusBarHeight + 50;
          }
        }
      });
    }
  };
</script>

<style scoped>
  /*.counter-warp {*/
    /*text-align: center;*/
    /*margin-top: 100px;*/
  /*}*/

  /*.home {*/
    /*display: inline-block;*/
    /*margin: 100px auto;*/
    /*padding: 5px 10px;*/
    /*color: blue;*/
    /*border: 1px solid blue;*/
  /*}*/
  .test{
    width:100%;
    height:50px;
    border-radius:100% 100% 0 0;
    background-color:red;
  }
  .header {
    /*background-color: #4A83C3;*/
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    color: #000;
  }
  .bg-imgae{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .title {
    /*padding-top: 20px;*/
    text-align: center;
    font-size: 18px;
    color: #ffffff;
  }

  .title-text {
    z-index: 999;
    color: #ffffff;
    font-size: 16px;
    position: absolute;
    /*top: 50%;*/
    left: 50%;
    transform: translateX(-50%);
  }
</style>
